<template>
  <el-card class="box-card">
    <el-button type="primary" icon="Plus">添加用户</el-button>
    <vue-table style="margin-top: 20px;" :border="false" :tableHeade="tableHeade" :tableData="tableData" :operationList="operationList" @operation="operation" @confirmDelete="confirmDelete" :width="operationList.length * 50">
      <template v-slot:default="{ row, head }">
        <div v-if="head === 'logoUrl'">
          <!-- <el-image style="width: 100px; height: 100px" :src="row.logoUrl" fit="fill" /> -->
        </div>
      </template>
    </vue-table>
    <vue-page :pageInfo="pageInfo" @currentChange="currentChange" />
  </el-card>
</template>
<script setup lang="ts">
import {reactive, ref, onMounted} from 'vue'
import type { operationListType, tableDataType } from '@/components/Table/type'
import { reqHasTrademark } from '@/api/product/trademark/index'
let tableHeade = reactive([
  { prop: 'tmName', label: '用户名' },
  { prop: 'userNumber', label: '账号' },
  { prop: 'userNumber', label: '角色' },
  // { prop: 'logoUrl', label: '权限', custom: true},
  { prop: 'userNumber', label: '备注' },
])
let operationList = reactive([
  { name: '查看', index: 1, isShow: true},
  { name: '编辑', index: 2, isShow: true},
  { name: '删除', index: 3, color: 'red', isShow: true},
])
let pageInfo = reactive({
  total: 0,
  page: 1,
  limit: 10
})
let tableData = ref<any>([])
onMounted(() => {
  getHasTrademark()
})
const getHasTrademark = async () => {
  let res = await reqHasTrademark(pageInfo.page, pageInfo.limit)
  console.log(res)
  tableData.value = res.data.records
  pageInfo.total = res.data.total
}
const operation = (item: operationListType) => {
  console.log(item)
}
const currentChange = (e: number) => {
  console.log(e)
}
const confirmDelete = (e: tableDataType) => {
  console.log(e)
}

let show = ref(false)
const toggleFade = () => {
  let element = document.getElementById('myElement');
  element!.classList.toggle('active');
}
</script>
<style scoped lang="scss">
</style>
